<template>
    <div class="w750">
        <!-- 底部 -->
        <footer :style="{ backgroundImage:  bottomColumn.background ? `url(${$imgUrlHead + bottomColumn.background})` :''  }">
            <div class="footer-box">
                <div
                    class="box-item"
                    v-for="(tabItem, tabIndex) in bottomColumn.tabBar"
                    :key="tabIndex"
                    @click="switchTo(tabItem)"
                    :class="[{ action: tabItem.path == $route.path }, themes.theme]"
                >
                    <img class="icon" :src="tabItem.path == $route.path ? tabItem.selectedIconPath : tabItem.iconPath" />
                    <span class="txt" v-if="!bottomColumn.displayText">{{ tabItem.text ? tabItem.text : '默认' }}</span>
                </div>
            </div>
        </footer>
        <!-- /底部 -->
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data() {
        return {}
    },
    created() {},
    mounted() {},
    methods: {
        switchTo(item) {
            if (item.path == ' ') {
                return
            }
            if(item.path == this.$route.fullPath) {
                return
            }
			let query = this.$route.query.invitCode ? ('?invitCode=' + this.$route.query.invitCode) : ''
            this.$router.push({
                path: item.path,
                query: { redirect: this.$route.path + query}
            })
        }
    },
    computed: {
        ...mapState(['cartNum', 'themes', 'bottomColumn'])
    },
    components: {}
}
</script>

<style>
.action.green span {
    color: #4eae31;
}
.action.crimson span {
    color: #de0233;
}
.action.red span {
    color: #e5004f;
}
.action.pale-red span {
    color: #fd8cb0;
}
.action.orange span {
    color: #ff6700;
}
.action.brown span {
    color: #bc9f5f;
}
.action.blue span {
    color: #2e82e3;
}
.action.light-green span {
    color: #5fc221;
}
</style>
